<template>
	<view class="wrap">
		<view class="keyboard-wrap flex-r">
			<view class="keyboard" v-for="(item, index) in 9" :key="index" @tap="inputNum(item)">
				<text>{{item}}</text>
			</view>
			<view class="keyboard bg-grey noactive">
				<text></text>
			</view>
			<view class="keyboard" @tap="inputNum(0)">
				<text>0</text>
			</view>
			<view class="keyboard bg-grey" @tap="deleteNum" >
				<image src="@/public/images/components/srf_qx.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * KeyBoard 密码键盘
	 * @description 用户输入支付密码使用的自定义数字键盘
	 * @event {Function} input 用户输入密码 
	 * @example <KeyBoard></KeyBoard>
	 */
	export default {
		name:"KeyBoard",
		emits: ['input'],
		data() {
			return {
				passWord: ''
			}
		},
		created(){
			console.log('created');
			console.log(this.passWord);
			this.passWord = ''
		},
		destroyed() {
			console.log('destroyed');
			console.log(this.passWord);
			this.passWord = ''
		},
		methods: {
			/**
			 * @description 输入密码
			 * @param {number} num - 输入的数字
			 */
			inputNum(num) {
				console.log(num);
				if(this.passWord.length < 6){
					uni.vibrateShort()
					this.passWord = this.passWord.toString() + num.toString()
					this.$emit("input", this.passWord)
				}
			},
			/**
			 * @description 删除密码
			 */
			deleteNum(){
				console.log(this.passWord);
				if(this.passWord.length != 0){
					this.passWord = this.passWord.substr(0, this.passWord.length - 1)
					console.log(this.passWord);
					this.$emit("input", this.passWord)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		border-top: 2rpx solid #E6E6E6;
	}
	.keyboard-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		.keyboard {
			width: 250rpx;
			height: 122rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			text{
				font-size: 42rpx;
			}
			image{
				width: 64rpx;
				height: 64rpx;
			}
			&.bg-grey{
				background: #E6E8ED;
			}
			border-right: 1rpx solid #E6E6E6;
			border-bottom: 1rpx solid #E6E6E6;
			&.noactive{
				background-color: #E6E8ED;
			}
		}
		.keyboard:nth-child(3n){
			border-right: none;
		}
		.keyboard:nth-child(n+10){
			border-bottom: none;
		}
		.keyboard:active{
			background-color: #efefef;
		}
	}
</style>